<template>
    <div style="height:100%;width:100%;" class="my">
        <group class="my-not-margin my-info">
            <cellBox is-link link="myInfo">
                <div class="my-user">
                    <div>{{myInfo.contactName}}</div>
                    <div>{{myInfo.mobile}}</div>
                </div>
            </cellBox>
        </group>
        <group class="my-not-margin">
            <cellBox is-link link="myTankerList">
                    <span>
             <i class="iconfont icon-jiayou my-icon" style="color:#44b549;font-size: 26px;"></i>我的加油机
          </span>
            </cellBox>
        </group>
        <group>
            <cellBox is-link link="icInfo">
                    <span>
                    <i class="iconfont icon-icon_yinhangqia my-icon" style="color:#fa993b;font-size: 20px;"></i>IC卡信息
          </span>
            </cellBox>
            <cellBox is-link link="icWater">
                    <span>
             <i class="iconfont icon-icqiaguanli my-icon" style="color:#ef5b4f;font-size: 26px;"></i>IC卡流水信息
          </span>
            </cellBox>
        </group>
        <group>
            <cellBox is-link link="eventList">
                    <span>
             <i class="iconfont icon-shijian my-icon" style="color:#2197d8;font-size: 20px;"></i>事件记录
          </span>
            </cellBox>
            <cellBox is-link link="pass">
                    <span>
             <i class="iconfont icon-suo my-icon" style="color:#44b549;font-size: 18px;"></i>密码管理
          </span>
            </cellBox>
        </group>
        <group>
            <cellBox is-link link="noticeList">
                    <span>
             <i class="iconfont icon-gonggao my-icon" style="color:#ed5c54;font-size: 16px;"></i>公告通知
          </span>
            </cellBox>
            <cellBox is-link link="help">
                    <span>
             <i class="iconfont icon-bangzhu1 my-icon" style="color:#ed6058;font-size: 18px;"></i>帮助中心
          </span>
            </cellBox>
        </group>
        <group>
            <cellBox class="vux-tap-active" @click.native="show = !show">
                    <span>
             <i class="iconfont icon-guanji my-icon" style="color:#ed5c54;font-size: 16px;"></i>退出
          </span>
            </cellBox>
        </group>
        <vux-confirm v-model="show" class="login-confirm" cancelText="取消" confirmText="确定" @on-confirm="onConfirm">
            <p class="login-confirm-label">确定退出？</p>
        </vux-confirm>
        <bar selected="my"></bar>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import {mapMutations} from 'vuex'
    import VUEX_NAME from '../../store/constants.vue'
    import {
        Group,
        CellBox,
        Confirm
    } from 'vux'
    import bar from '../../components/bar.vue'

    export default {
        name: 'dataCenter',
        components: {
            Group,
            CellBox,
            bar,
            'vux-confirm': Confirm
        },
        data: function () {
            return {
                show: false,
            }
        },
        created: function () {
            if (!this.myInfo) {
                this.$ajax(
                    'mch/myInfo',
                    {},
                    (content) => {
                        this.cMyInfo(content)
                    })
            }


        },
        computed: mapState([
            VUEX_NAME.myInfo
        ]),
        methods: {
            ...mapMutations([
                VUEX_NAME.cMyInfo
            ]),
            onConfirm: function () {
                this.$ajax(
                    '/logout',
                    {},
                    (content) => {
                        this.cMyInfo('')
                        this.$router.push('login')
                    })
            }


        }
    }

</script>

<style>

</style>
